<template>
    <div class="script-detail-container">
        <el-page-header style="height: 40px;" @back="router.go(-1)" :content="script.title" />

        <el-row :gutter="20">
            <el-col :span="16">
                <div class="script-header">
                    <el-image
                            :src="script.cover"
                            fit="cover"
                            class="main-image"
                    >
                        <template #error>
                            <div class="image-error">
                                <el-icon><Picture /></el-icon>
                            </div>
                        </template>
                    </el-image>

                    <div class="script-basic-info">
                        <h2>{{ script.title }}</h2>

                        <div class="meta-item">
                            <span class="meta-label">难度:</span>
                            <el-rate
                                    v-model="script.difficulty"
                                    disabled
                                    :max="4"
                                    :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
                            />
                            <span class="meta-value">{{ getDifficultyText(script.difficulty) }}</span>
                        </div>

                        <div class="meta-item">
                            <span class="meta-label">类型:</span>
                            <el-tag
                                    v-for="genre in script.genres"
                                    :key="genre"
                                    :type="genre === '恐怖' ? 'danger' : genre === '情感' ? 'success' : ''"
                                    style="margin-right: 8px; margin-bottom: 8px"
                            >
                                {{ genre }}
                            </el-tag>
                        </div>

                        <div class="meta-item">
                            <span class="meta-label">人数:</span>
                            <span class="meta-value">{{ script.minPlayers }}-{{ script.maxPlayers }}人</span>
                        </div>

                        <div class="meta-item">
                            <span class="meta-label">时长:</span>
                            <span class="meta-value">{{ script.duration }}小时</span>
                        </div>

                        <div class="meta-item">
                            <span class="meta-label">作者:</span>
                            <span class="meta-value">{{ script.author }}</span>
                        </div>
                    </div>
                </div>

                <el-tabs v-model="activeTab" class="detail-tabs">
                    <el-tab-pane label="剧本简介" name="intro">
                        <div class="script-intro">
                            <h3>故事背景</h3>
                            <p>{{ script.story }}</p>

                            <h3>角色介绍</h3>
                            <el-collapse v-model="activeRoles">
                                <el-collapse-item
                                        v-for="role in script.roles"
                                        :key="role.name"
                                        :title="role.name"
                                        :name="role.name"
                                >
                                    <div>
                                        <p><strong>性别:</strong> {{ role.gender }}</p>
                                        <p><strong>年龄:</strong> {{ role.age }}</p>
                                        <p><strong>简介:</strong> {{ role.description }}</p>
                                    </div>
                                </el-collapse-item>
                            </el-collapse>
                        </div>
                    </el-tab-pane>

                    <el-tab-pane label="提供商家" name="shops">
                        <div class="available-shops">
                            <h3>可玩此剧本的商家</h3>
                            <shop-card
                                    v-for="shop in script.availableShops"
                                    :key="shop.id"
                                    :shop="shop"
                                    style="margin-bottom: 15px"
                                    @click.native="goToShopDetail(shop.id)"
                            />
                        </div>
                    </el-tab-pane>

                    <el-tab-pane label="玩家评价" name="reviews">
                        <div class="script-reviews">
                            <el-rate
                                    v-model="script.rating"
                                    disabled
                                    show-score
                                    text-color="#ff9900"
                                    score-template="{value}分"
                            />

                            <div class="review-list">
                                <div v-for="review in script.reviews" :key="review.id" class="review-item">
                                    <div class="review-header">
                                        <span class="review-user">{{ review.user }}</span>
                                        <el-rate
                                                v-model="review.rating"
                                                disabled
                                                size="small"
                                        />
                                    </div>
                                    <div class="review-content">{{ review.content }}</div>
                                    <div class="review-date">{{ review.date }}</div>
                                    <div class="review-role">扮演角色: {{ review.role }}</div>
                                </div>
                            </div>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </el-col>

            <el-col :span="8">
                <el-card class="action-card">
                    <h3>立即预约</h3>

                    <el-form label-position="top">
                        <el-form-item label="选择商家">
                            <el-select
                                    v-model="selectedShop"
                                    placeholder="请选择商家"
                                    style="width: 100%"
                            >
                                <el-option
                                        v-for="shop in script.availableShops"
                                        :key="shop.id"
                                        :label="shop.name"
                                        :value="shop.id"
                                />
                            </el-select>
                        </el-form-item>

                        <el-form-item label="选择日期">
                            <el-date-picker
                                    v-model="reserveDate"
                                    type="date"
                                    placeholder="选择日期"
                                    style="width: 100%"
                            />
                        </el-form-item>

                        <el-form-item label="选择时间">
                            <el-time-select
                                    v-model="reserveTime"
                                    :picker-options="{
                  start: '10:00',
                  step: '00:30',
                  end: '22:00'
                }"
                                    placeholder="选择时间"
                                    style="width: 100%"
                            />
                        </el-form-item>

                        <el-form-item label="玩家人数">
                            <el-input-number
                                    v-model="playerCount"
                                    :min="script.minPlayers"
                                    :max="script.maxPlayers"
                                    controls-position="right"
                            />
                        </el-form-item>

                        <el-button
                                type="primary"
                                size="large"
                                style="width: 100%; margin-top: 20px"
                                @click="handleReserve"
                        >
                            确认预约
                        </el-button>
                    </el-form>
                </el-card>

                <el-card class="tips-card" style="margin-top: 20px">
                    <h3>游玩提示</h3>
                    <ul class="tips-list">
                        <li v-for="(tip, index) in script.tips" :key="index">
                            {{ tip }}
                        </li>
                    </ul>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Picture } from '@element-plus/icons-vue'
import ShopCard from '../../merchant/shopcard'
import { mockScripts } from '@/components/api/mockData.js'

const route = useRoute()
const router = useRouter()
const scriptId = route.params.id

const script = ref({})
const activeTab = ref('intro')
const activeRoles = ref([])
const selectedShop = ref('')
const reserveDate = ref('')
const reserveTime = ref('')
const playerCount = ref(0)

// 获取剧本详情数据
onMounted(async () => {
    script.value = await mockScripts(scriptId)
    playerCount.value = script.value.minPlayers
})

const getDifficultyText = (difficulty) => {
    const levels = ['简单', '中等', '困难', '烧脑']
    return levels[difficulty - 1] || levels[0]
}

const goToShopDetail = (id) => {
    router.push({ name: 'shop-detail', params: { id } })
}

const handleReserve = () => {
    if (!selectedShop.value) {
        ElMessage.error('请选择商家')
        return
    }
    if (!reserveDate.value) {
        ElMessage.error('请选择日期')
        return
    }
    if (!reserveTime.value) {
        ElMessage.error('请选择时间')
        return
    }

    // 预约逻辑
    console.log('预约信息:', {
        script: script.value.title,
        shop: selectedShop.value,
        date: reserveDate.value,
        time: reserveTime.value,
        players: playerCount.value
    })

    ElMessage.success('预约成功!')
}
</script>

<style scoped>
.script-detail-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.script-header {
    display: flex;
    margin-bottom: 20px;
}

.main-image {
    width: 300px;
    height: 400px;
    border-radius: 4px;
    margin-right: 20px;
}

.image-error {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f5f5f5;
    color: #999;
}

.script-basic-info {
    flex: 1;
}

.script-basic-info h2 {
    margin-top: 0;
    margin-bottom: 20px;
}

.meta-item {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}

.meta-label {
    width: 60px;
    color: #666;
}

.meta-value {
    margin-left: 10px;
}

.detail-tabs {
    margin-top: 20px;
}

.script-intro h3,
.available-shops h3,
.script-reviews h3 {
    margin-top: 0;
    margin-bottom: 15px;
    color: #333;
}

.action-card {
    position: sticky;
    top: 20px;
}

.tips-list {
    padding-left: 20px;
}

.tips-list li {
    margin-bottom: 10px;
    color: #666;
}

.review-item {
    padding: 15px 0;
    border-bottom: 1px solid #eee;
}

.review-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.review-user {
    font-weight: bold;
}

.review-content {
    color: #666;
    margin-bottom: 5px;
}

.review-date,
.review-role {
    font-size: 12px;
    color: #999;
}
</style>